import { Form, InputNumber, Button, Space, message, Statistic, Card } from 'antd';
import { SaveOutlined, CloseOutlined, DollarOutlined } from '@ant-design/icons';
import useMembersStore from '../../store/members/useMembersStore';

const RechargeForm = ({ member, onSuccess, onCancel }) => {
  const [form] = Form.useForm();
  const { recharge } = useMembersStore();

  const handleSubmit = async (values) => {
    try {
      await recharge(member.id, values.amount);
      message.success(`充值成功，当前余额：¥${(member.balance + values.amount).toFixed(2)}`);
      onSuccess?.();
    } catch {
      message.error('充值失败');
    }
  };

  return (
    <div>
      <Card style={{ marginBottom: 24, background: '#f5f5f5' }}>
        <div style={{ display: 'flex', justifyContent: 'space-around' }}>
          <div>
            <div style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.45)', marginBottom: 8 }}>
              会员昵称
            </div>
            <div style={{ fontSize: 18, fontWeight: 600 }}>{member.nickname}</div>
          </div>
          <div>
            <div style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.45)', marginBottom: 8 }}>
              手机号
            </div>
            <div style={{ fontSize: 18, fontWeight: 600 }}>{member.phone}</div>
          </div>
          <div>
            <Statistic
              title="当前余额"
              value={member.balance}
              precision={2}
              prefix="¥"
              valueStyle={{ color: '#3f8600' }}
            />
          </div>
        </div>
      </Card>

      <Form
        form={form}
        layout="vertical"
        onFinish={handleSubmit}
        autoComplete="off"
      >
        <Form.Item
          label="充值金额"
          name="amount"
          rules={[
            { required: true, message: '请输入充值金额' },
            { type: 'number', min: 0.01, message: '充值金额必须大于0' }
          ]}
        >
          <InputNumber
            min={0}
            precision={2}
            style={{ width: '100%' }}
            placeholder="请输入充值金额"
            prefix={<DollarOutlined />}
          />
        </Form.Item>

        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit" icon={<SaveOutlined />}>
              确认充值
            </Button>
            <Button onClick={onCancel} icon={<CloseOutlined />}>
              取消
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};

export default RechargeForm;
